<template>
  <!-- <div>
    <textarea v-model="code" style="width: 500px; height: 300px"></textarea>
    <div ref="code-preview"></div>
    <el-button @click="execCode">Code Preview</el-button>
  </div> -->
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <!-- aside -->
      <el-aside width="200px">
        <el-row>
          <el-button round @click="addControl('button')">Button</el-button>
          <el-button type="primary" round @click="addControl('radio')"
            >Radio</el-button
          >
          <el-button type="success" round @click="addControl('checkbox')"
            >Checkbox</el-button
          >
          <el-button type="info" round @click="addControl('input')"
            >Input</el-button
          >
          <el-button type="warning" round @click="addControl('select')"
            >Select</el-button
          >
          <el-button type="danger" round @click="addControl('datepicker')"
            >DatePicker</el-button
          >
        </el-row>
      </el-aside>
      <el-container>
        <!-- main -->
        <el-main>
          <div ref="code-preview"></div>
        </el-main>
        <el-footer>
          {{ control }}
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import metaRuntimeTemplate from "@/components/meta-runtime-template";
import Vue from "vue";
// import { match } from "@/components/meta-runtime-template/utils";
// import tmpl from "@/components/meta-runtime-template/tmpl";

const controlsMap = {
  button: {
    tmpl: `<el-button round>Button</el-button>`,
    script: "{}",
  },
  radio: {
    tmpl: `<el-radio v-model="radio" label="1">备选项</el-radio>`,
    script: `{data(){ return { radio: '1' }}}`,
  },
  checkbox: {
    tmpl: `<el-checkbox v-model="checked">备选项</el-checkbox>`,
    script: `{data() {return { checked: true }}}`,
  },
  input: {
    tmpl: `<el-input v-model="input" placeholder="请输入内容"></el-input>`,
    script: `{data() {return { input: "" }}}`,
  },
  select: {
    tmpl: `<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>`,
    script: `{
      data() {
        return {
          options: [
            {
              value: "选项1",
              label: "黄金糕",
            },
            {
              value: "选项2",
              label: "双皮奶",
            },
            {
              value: "选项3",
              label: "蚵仔煎",
            },
            {
              value: "选项4",
              label: "龙须面",
            },
            {
              value: "选项5",
              label: "北京烤鸭",
            },
          ],
          value: "",
        }
      }
    }`,
  },
  datepicker: {
    tmpl: ` <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>`,
    script: `{ data() { return { value1: ''}}}`,
  },
};

export default {
  components: {
    // metaRuntimeTemplate,
  },
  data() {
    return {
      control: "",
    };
  },
  methods: {
    execCode(template, jsContent) {
      // let { template, jsContent } = match(this.code);
      let container = document.createElement("div");

      this.$refs["code-preview"].innerHTML = "";
      this.$refs["code-preview"].appendChild(container);

      this.$nextTick(() => {
        let temp = Object.assign(
          {
            components: { metaRuntimeTemplate },
            render() {
              return (
                <meta-runtime-template
                  template={template}
                ></meta-runtime-template>
              );
            },
          },
          eval(`(${jsContent})`)
        );
        new Vue(temp).$mount(container);
      });
    },
    addControl(ctype) {
      let control = controlsMap[ctype];
      if (control) {
        this.execCode(control.tmpl, control.script);
        this.control = control;
      }
    },
  },
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  min-height: 360px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>